import React, { FC, useState } from "react"
import { Card, Input, Table } from "antd"
import { SearchOutlined } from "@ant-design/icons"
import styles from "./index.module.scss"

type dataType = {
    _id: string
    appId: string
    path: string
    wst: number
    fcp: number
    fid: number
    ttfb: number
    dns: number
    tcp: number
}

const dataSource: dataType[] = [
    { _id: "1", appId: "201901064119", path: "/login", wst: 601, fcp: 520, fid: 2, ttfb: 13, dns: 0, tcp: 0 },
    { _id: "2", appId: "201901064119", path: "/manage/list", wst: 119, fcp: 710, fid: 2, ttfb: 9, dns: 0, tcp: 0 },
    { _id: "3", appId: "201901064119", path: "/manmage/star/", wst: 253, fcp: 353, fid: 4, ttfb: 10, dns: 1002, tcp: 0 }
]

const PagePerf: FC = () => {
    const [searchText, setSearchText] = useState("")
    const [filteredData, setFilteredData] = useState(dataSource)

    const handleSearch = (value: any) => {
        setSearchText(value)
        const filtered = dataSource.filter(item => item.path.toLowerCase().includes(value.toLowerCase()))
        setFilteredData(filtered)
    }

    function renderValue(value: number) {
        if (value > 600) {
            return <span className={styles["high-latency"]}>{value} ms</span>
        } else {
            return <span className={styles["low-latency"]}>{value} ms</span>
        }
    }

    const columns = [
        {
            title: (
                <Input
                    placeholder="请输入路由信息"
                    prefix={<SearchOutlined />}
                    value={searchText}
                    style={{ width: "300px" }}
                    onChange={e => handleSearch(e.target.value)}
                />
            ),
            dataIndex: "path"
        },
        {
            title: "应用程序ID",
            dataIndex: "appId"
        },
        {
            title: "白屏时间",
            dataIndex: "wst",
            render: (value: number) => {
                return renderValue(value)
            },
            sorter: {
                compare: (a: dataType, b: dataType) => a.wst - b.wst,
                // 优先级
                multiple: 1
            }
        },
        {
            title: "FCP",
            dataIndex: "fcp",
            render: (value: number) => {
                return renderValue(value)
            },
            sorter: {
                compare: (a: dataType, b: dataType) => a.fcp - b.fcp,
                // 优先级
                multiple: 2
            }
        },
        {
            title: "FID",
            dataIndex: "fid",
            render: (value: number) => {
                return renderValue(value)
            },
            sorter: {
                compare: (a: dataType, b: dataType) => a.fid - b.fid,
                // 优先级
                multiple: 3
            }
        },
        {
            title: "TTFB",
            dataIndex: "ttfb",
            render: (value: number) => {
                return renderValue(value)
            },
            sorter: {
                compare: (a: dataType, b: dataType) => a.ttfb - b.ttfb,
                // 优先级
                multiple: 4
            }
        },
        {
            title: "DNS解析时长",
            dataIndex: "dns",
            render: (value: number) => {
                return renderValue(value)
            },
            sorter: {
                compare: (a: dataType, b: dataType) => a.dns - b.dns,
                // 优先级
                multiple: 5
            }
        },
        {
            title: "TCP链接时长",
            dataIndex: "tcp",
            render: (value: number) => {
                return renderValue(value)
            },
            sorter: {
                compare: (a: dataType, b: dataType) => a.tcp - b.tcp,
                // 优先级
                multiple: 6
            }
        }
    ]
    return (
        <Card title="页面性能分析" variant="borderless">
            {/* table需要key属性，但是数据源没有key只有_id */}
            <Table dataSource={filteredData} columns={columns} rowKey={(q: any) => q._id} />
        </Card>
    )
}

export default PagePerf
